import { createBrowserRouter } from 'react-router-dom'
import { lazy } from 'react'

const Index = lazy(() => import('../pages/Index'))
const Home = lazy(() => import('../pages/Home'))
const Login = lazy(() => import('../pages/Login'))
const Order = lazy(() => import('../pages/Order'))
const User = lazy(() => import('../pages/User'))
const Orderadd = lazy(() => import('../pages/Orderadd'))
const Orderlist = lazy(() => import('../pages/Orderlist'))
const Useradd = lazy(() => import('../pages/Useradd'))
const Userlist = lazy(() => import('../pages/Userlist'))

const routerAll = {
    home: { path: '/index/home', element: <Home></Home>, title: '首页' },
    order:
    {
        path: '/index/order', element: <Order></Order>, children: [
            { path: '/index/order/orderadd', element: <Orderadd></Orderadd>, title: '订单添加' },
            { path: '/index/order/orderlist', element: <Orderlist></Orderlist>, title: '订单编辑' }
        ], title: '订单'
    },
    user:
    {
        path: '/index/user', element: <User></User>, children: [
            { path: '/index/user/useradd', element: <Useradd></Useradd>, title: '用户添加' },
            { path: '/index/user/userlist', element: <Userlist></Userlist>, title: '用户编辑' },
        ], title: '用户'
    }

}

const roules = {
    admin: {
        pagesrouter: ['home', 'order', 'user'],
        btns: {
            home: ['delete', 'Edit', 'add']
        }
    },
    user: {
        pagesrouter: ['home'],
        btns: {
            home: ['delete', 'Edit']
        }
    }
}


const username = localStorage.getItem('username')
const { pagesrouter, btns } = roules[username]
export const routers = pagesrouter.map((item) => {
    return {
        ...routerAll[item],
        loader: () => {
            return btns[item]
        }
    }
})



const router = createBrowserRouter([
    { path: '/index', element: <Index></Index>, children: routers },
    { path: '/', element: <Login></Login> },

])

export default router